<template>
  <view class="login-page">
    
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'LoginPage',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      showPassword: false,
      rememberPassword: false,
      errorMessage: '',
      isLoading: false
    }
  },
  computed: {
    canLogin() {
      return this.loginForm.username.length > 0 && this.loginForm.password.length >= 6
    }
  },
  onLoad(options) {
    // 如果从其他页面跳转过来，记录来源页面
    this.redirectUrl = options.redirect || '/pages/index/index'
    
    // 加载记住的登录信息
    this.loadRememberedLogin()
  },
  methods: {
    ...mapActions('user', ['login']),

    // 返回上一页
    goBack() {
      uni.navigateBack({
        fail: () => {
          // 如果没有上一页，跳转到首页
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    },

    // 清除错误信息
    clearError() {
      this.errorMessage = ''
    },

    // 切换密码显示状态
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },

    // 切换记住密码状态
    toggleRememberPassword() {
      this.rememberPassword = !this.rememberPassword
    },

    // 处理登录
    async handleLogin() {
      if (!this.canLogin || this.isLoading) return

      this.isLoading = true
      this.errorMessage = ''

      try {
        await this.login(this.loginForm)
        
        // 如果选择记住密码，保存到本地
        if (this.rememberPassword) {
          this.saveLoginInfo()
        } else {
          this.clearLoginInfo()
        }

        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 延迟跳转，让用户看到成功提示
        setTimeout(() => {
          this.navigateAfterLogin()
        }, 1500)

      } catch (error) {
        this.errorMessage = error.message || '登录失败，请重试'
        
        // 添加震动反馈
        uni.vibrateShort()
      } finally {
        this.isLoading = false
      }
    },

    // 登录后跳转
    navigateAfterLogin() {
      if (this.redirectUrl && this.redirectUrl !== '/pages/auth/login') {
        uni.redirectTo({
          url: this.redirectUrl
        })
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    },

    // 跳转到注册页面
    goToRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      })
    },

    // 跳转到忘记密码页面
    goToForgotPassword() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 微信登录
    loginWithWechat() {
      uni.showToast({
        title: '微信登录开发中',
        icon: 'none'
      })
    },

    // QQ登录
    loginWithQQ() {
      uni.showToast({
        title: 'QQ登录开发中',
        icon: 'none'
      })
    },

    // 保存登录信息
    saveLoginInfo() {
      try {
        uni.setStorageSync('rememberedLogin', {
          username: this.loginForm.username,
          password: this.loginForm.password
        })
      } catch (error) {
        console.error('保存登录信息失败:', error)
      }
    },

    // 清除登录信息
    clearLoginInfo() {
      try {
        uni.removeStorageSync('rememberedLogin')
      } catch (error) {
        console.error('清除登录信息失败:', error)
      }
    },

    // 加载记住的登录信息
    loadRememberedLogin() {
      try {
        const remembered = uni.getStorageSync('rememberedLogin')
        if (remembered) {
          this.loginForm = { ...remembered }
          this.rememberPassword = true
        }
      } catch (error) {
        console.error('加载登录信息失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* 自定义导航栏 */
  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10rpx);
    z-index: 999;
    
    .navbar-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 32rpx;
      margin-top: var(--status-bar-height, 44rpx);
      
      .navbar-left {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .navbar-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .navbar-right {
        width: 60rpx;
      }
    }
  }
  
  .login-container {
    padding-top: calc(88rpx + var(--status-bar-height, 44rpx));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 60rpx;
    padding-right: 60rpx;
    
    .logo-section {
      text-align: center;
      margin-bottom: 100rpx;
      
      .app-logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
      }
      
      .app-name {
        display: block;
        font-size: 48rpx;
        font-weight: 700;
        color: #fff;
        margin-bottom: 16rpx;
      }
      
      .app-slogan {
        display: block;
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    .login-form {
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 24rpx;
      padding: 60rpx 40rpx;
      backdrop-filter: blur(10rpx);
      box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
      
      .input-group {
        margin-bottom: 40rpx;
        
        .input-item {
          display: flex;
          align-items: center;
          background-color: #f8f9fa;
          border: 2rpx solid #e9ecef;
          border-radius: 16rpx;
          padding: 20rpx 24rpx;
          transition: all 0.3s ease;
          
          &:focus-within {
            border-color: #007AFF;
            background-color: #fff;
            box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
          }
          
          .input-field {
            flex: 1;
            margin-left: 20rpx;
            font-size: 32rpx;
            color: #333;
            background: none;
            border: none;
            outline: none;
            
            &::placeholder {
              color: #adb5bd;
            }
          }
          
          .password-toggle {
            margin-left: 20rpx;
            padding: 8rpx;
            cursor: pointer;
          }
        }
      }
      
      .error-message {
        margin-bottom: 24rpx;
        padding: 16rpx 20rpx;
        background-color: #ffeaea;
        border: 1rpx solid #ffcdd2;
        border-radius: 12rpx;
        
        .error-text {
          font-size: 26rpx;
          color: #d32f2f;
        }
      }
      
      .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 60rpx;
        
        .remember-password {
          display: flex;
          align-items: center;
          
          .option-text {
            margin-left: 12rpx;
            font-size: 26rpx;
            color: #666;
          }
        }
        
        .forgot-password {
          font-size: 26rpx;
          color: #007AFF;
        }
      }
      
      .login-btn-container {
        margin-bottom: 60rpx;
        
        .login-btn {
          width: 100%;
          height: 96rpx;
          background: linear-gradient(135deg, #007AFF 0%, #5856d6 100%);
          border: none;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
          transition: all 0.3s ease;
          
          &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
          }
          
          &.disabled {
            background: #e9ecef;
            box-shadow: none;
            
            .btn-text {
              color: #adb5bd;
            }
          }
          
          &.loading {
            background: #e9ecef;
          }
          
          .btn-text {
            margin-left: 12rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #fff;
          }
        }
      }
      
      .third-party-login {
        .divider {
          text-align: center;
          margin-bottom: 40rpx;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1rpx;
            background-color: #e9ecef;
          }
          
          .divider-text {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 0 32rpx;
            font-size: 26rpx;
            color: #adb5bd;
          }
        }
        
        .third-party-buttons {
          display: flex;
          justify-content: center;
          gap: 60rpx;
          
          .third-party-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20rpx;
            
            .third-party-text {
              margin-top: 12rpx;
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
      
      .register-link {
        text-align: center;
        margin-top: 40rpx;
        
        .register-text {
          font-size: 28rpx;
          color: #666;
        }
        
        .register-btn {
          font-size: 28rpx;
          color: #007AFF;
          font-weight: 600;
          margin-left: 12rpx;
        }
      }
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .login-page .login-container {
    padding-left: 40rpx;
    padding-right: 40rpx;
    
    .login-form {
      padding: 40rpx 32rpx;
    }
  }
}
</style>